<template>
    <div v-loading="loading">
      <!--      面包屑导航-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!--      卡片视图区-->
      <el-card>
        <el-row :gutter="20">
          <el-col :span="2">
            <el-button type="primary" @click="showAddCateForm">添加商品</el-button>
          </el-col>
        </el-row>

<!--      商品列表-->
        <tree-table class="treeTable" :data="categoryList" :columns="columns"
                    :selection-type="false" :expand-type="false" show-index border
                    index-text="索引" :show-row-hover="false">
<!--          是否有效模板-->
          <template slot="isok" slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted ===  true" style="color: red"></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
<!--          排序模板-->
          <template slot="order" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level === 0" size="mini">一级</el-tag>
            <el-tag v-if="scope.row.cat_level === 1" size="mini" type="success">二级</el-tag>
            <el-tag v-if="scope.row.cat_level === 2" size="mini" type="warning">三级</el-tag>
          </template>
<!--          操作模板-->
          <template slot="opt" slot-scope="scope">
            <!--             修改按钮-->
            <!--              open-delay延迟出现，单位毫秒 enterable 鼠标是否可进入到 tooltip 中-->
            <el-tooltip effect="dark" content="编辑" placement="top" :open-delay=openDelay :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            </el-tooltip>
            <!--              删除按钮-->
            <el-tooltip effect="dark" content="删除" placement="top" :open-delay=openDelay :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeltDialog(scope.row.cat_id)">删除</el-button>
            </el-tooltip>
          </template>
        </tree-table>
      <!--      分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="categoryQuery.pagenum"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="categoryQuery.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>

<!--      添加分类的对话框-->
      <el-dialog
        title="添加分类"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed">
        <el-form :model="addCateForm" :rules="addRules" ref="addCateFormRef" label-width="100px">
          <el-form-item label="分类名称:" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:">
<!--            级联选择框 options: 数据源 props: 配置选项 v-model绑定的是选中的数据，必须是一个数组-->
            <el-cascader
              v-model="selectKeys"
              :options="parentCateList"
              :props="cateProps"
              clearable
              @change="parentCateChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCategory">确 定</el-button>
        <el-button type="info" @click="addDialogClosed">重置</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<style scoped>
  .treeTable {
    margin-top: 15px;
  }
</style>
<script>
export default {
  data () {
    return {
      // 分类数据列表集合
      categoryList: [],
      // 查询商品分类参数列表
      categoryQuery: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      total: 0,
      openDelay: 500,
      // 加载界面开关
      loading: false,
      // 为table指定列的属性
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          // 将当前列定义为模板列
          type: 'template',
          // 当前这一列使用的模板
          template: 'isok'
        },
        {
          label: '排序',
          // 将当前列定义为模板列
          type: 'template',
          // 当前这一列使用的模板
          template: 'order'
        },
        {
          label: '操作',
          // 将当前列定义为模板列
          type: 'template',
          // 当前这一列使用的模板
          template: 'opt'
        }
      ],
      // 添加按钮开关
      addDialogVisible: false,
      // 添加分类表单数据集合
      addCateForm: {
        // 父级分类id
        cat_pid: 0,
        // 将要分类的名称
        cat_name: '',
        // 分类的等级，默认要添加的是一级分类
        cat_level: 0
      },
      // 添加分类表单规则
      addRules: {
        cat_name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ]
      },
      // 父级分类列表
      parentCateList: [],
      // 指定级联选择器的配置对象
      // value:指定选项的值为选项对象的某个属性值
      // label:指定选项标签为选项对象的某个属性值
      // children:指定选项的子选项为选项对象的某个属性值
      // checkStrictly：是否严格的遵守父子节点不互相关联，即是否允许选择任意一级的选项
      cateProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        checkStrictly: true,
        // 触发方式，默认点击触发，hover鼠标移上去即可触发
        expandTrigger: 'hover'
      },
      // 选中的父级id数组
      selectKeys: []
    }
  },
  methods: {
    async getCategoryList () {
      const { data: res } = await this.$http.get('categories', { params: this.categoryQuery })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.total = res.data.total
      this.categoryList = res.data.result
    },
    // 添加分类
    async addCategory() {
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        this.parentCateChange()
        const { data: res } = await this.$http.post('categories', this.addCateForm)
        if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
        // 刷新列表
        this.getCategoryList()
        // 关闭窗口
        this.addDialogVisible = false
        return this.$message.success(res.meta.msg)
      })
    },
    //  监听pageSize改变事件
    handleSizeChange (newSize) {
      this.categoryQuery.pagesize = newSize
      this.getCategoryList()
    },
    //  监听页码值改变事件
    handleCurrentChange (newPage) {
      this.categoryQuery.pagenum = newPage
      this.getCategoryList()
    },
    // 添加分类表单重置功能
    addDialogClosed() {
      this.$refs.addCateFormRef.resetFields()
      // 重置为0
      this.selectKeys = []
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    },
    // 展示添加分类表单
    async showAddCateForm() {
      // 获取所有的二级分类
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) return this.$message.error('获取父级分类数据失败！')
      this.parentCateList = res.data
      // 弹出对话框
      this.addDialogVisible = true
    },
    // 添加分类选择项发生变化触发函数
    parentCateChange() {
      console.log(this.selectKeys)
      if (this.selectKeys.length > 0) {
        //  更新父级节点
        this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
        //  更新分类等级
        this.addCateForm.cat_level = this.selectKeys.length
      } else {
        //  更新父级节点
        this.addCateForm.cat_pid = 0
        //  更新分类等级
        this.addCateForm.cat_level = 0
      }
    },
    // 删除弹框
    showDeltDialog (id) {
      this.loading = true
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('categories/' + id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        //  刷新列表
        this.getCategoryList().then(res => {
          // 获取到数据
          this.loading = false
        })
        this.getCategoryList()
      }).catch(() => {
        this.loading = false
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getCategoryList()
    // 判断selectKeys的长度，由此来判断是否选中了分类
    if (this.selectKeys.length > 0) {
      //  更新父级节点
      this.addCateForm.cat_pid = this.selectKeys[this.selectKeys.length - 1]
      //  更新分类等级
      this.addCateForm.cat_level = this.selectKeys.length
    } else {
      // 重置为0
      this.addCateForm.cat_pid = 0
      this.addCateForm.cat_level = 0
    }
  }
}
</script>
